<script setup>
import { ArrowLeft,CircleCloseFilled  } from '@element-plus/icons-vue'
import { ref,reactive, onMounted } from 'vue'
import {index,create}  from '../../api/access.js'
import { ElMessage } from 'element-plus'

const state = reactive({
  access:'',
  form:{},
 
});
const handleSetDown = ()=>{

}
const visible = ref(false)
const methods = [
  {id:1,name:'get'},
  {id:2,name:'post'},
  {id:3,name:'any'}
  ];
const add = ()=>{
	visible.value = true
}
const del = ()=>{
	
}
const onSubmit = ()=>{
  create(state.form).then(res=>{
      if(res.code == 200) {
         ElMessage({
            message: '请刷新.',
            type: 'success',
          })
      }
  });
}
const handleDel = ()=>{

}

onMounted(()=>{
 	index().then(res=>{
 		if(res.code == 200) {
 			state.access = res.data.data
 		}
 	});
});

</script>

<template>
 <el-row class="mb-4">
    <el-button type="success" @click="add">添加</el-button>
    <el-button type="danger" @click="del">删除</el-button>
  </el-row>
   <el-table :data="state.access" stripe style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="权限名" width="180" />
    <el-table-column prop="permission" label="权限" width="180" />
    <el-table-column prop="type" label="请求类型" width="180" >
      <template #default="scope">
          <el-tag v-if="scope.row.type == 1">get</el-tag>
          <el-tag v-if="scope.row.type == 2">post</el-tag>
          <el-tag v-if="scope.row.type == 3">any</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="tip" label="描述" width="180" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small">修改</el-button>
        <el-button link type="primary" size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

   <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">添加权限!</h4>
        
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
            <el-form-item label="权限名">
              <el-input v-model="state.form.name" />
            </el-form-item>
             <el-form-item label="权限">
              <el-input v-model="state.form.permission" />
            </el-form-item>
             <el-form-item label="请求类型">
            <el-select v-model="state.form.type" placeholder="请选择" size="large">
              <el-option  v-for="item in methods"
               :label="item.name"
               :value="item.id"
               :key="item.id" />
            </el-select>
            </el-form-item>
              <el-form-item label="描述">
              <el-input v-model="state.form.tip" />
            </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </el-form-item>
  </el-dialog>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
